<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WanhuCMS Tools</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="__ADMINLTE__bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="__ADMINLTE__bootstrap/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="__ADMINLTE__bootstrap/ionicons/css/ionicons.min.css">
<script type="text/javascript" src="__PLUGINS__/webuploader/jquery-1.10.2.min.js"></script>

<!-- Font Awesome 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    -->
<!-- Ionicons
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    --> 
<!-- Theme style -->
<link rel="stylesheet" href="__ADMINLTE__dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="__ADMINLTE__dist/css/skins/skin-blue.min.css">
<link rel="stylesheet" type="text/css" href="__PLUGINS__webuploader/webuploader.css">
<!-- test -->
<script src="__ADMINLTE__plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="__ADMINLTE__plugins/select2/select2.full.min.js"></script>
<link rel="stylesheet" href="__ADMINLTE__plugins/select2/select2.min.css">
<!-- test end -->
<script type="text/javascript" charset="utf-8" src="__PLUGINS__ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PLUGINS__ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="__PLUGINS__ueditor/lang/zh-cn/zh-cn.js"></script>

<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
{block name="css"}

{/block}
<style type="text/css">
.pagea{
    float: right;
}
.pagea .current{
    background:#337ab7;
    border: 1px solid #ddd;
    color: #fff;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 6px 12px;
    position: relative;
    text-decoration: none;
}
.pagea a{
    background:#fafafa;
    border: 1px solid #ddd;
    color: #666;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 6px 12px;
    position: relative;
    text-decoration: none;
}
.listorder{
    border: 1px solid #D0D0D0;
    height: 28px;
    margin: 0 5px 0 0;
    padding: 2px 0 2px 5px;
    border: 1px solid #d0d0d0;
    background: url("public/images/input.png") repeat-x scroll 0 0 #FFFFFF;
    font-size: 12px;
    border-radius: 3px;
}
</style>
</head>
<body>
<div class="box-body pad">
    <label>栏目名称:</label>
    <input id="url" placeholder="测试页面标识" type="text" name="url" value="" class="form-control" />
    <input id="str" placeholder="待测试数据对象" type="text" name="str" value="" class="form-control" />
    <br />
    <button type="submit" class="btn btn-sx btn-primary submit-test">TEST IT!</button>
</div>
<div class='result'> </div>
<div class='tags'> </div>
<script>
$('.submit-test').click(function(){
        window.getResult();
        });
function getResult(){
    var str = $('#str').val();
    var url = '{:__ROOT__}/{:C('base_url')}devel/'+$('#url').val();
    //url = 'devel/'+url;
    $.get(url, {str:str}, function(result){
            json = eval('('+result+')');
            window.showResult(json);
            });
};
function setStr(str){
    $('#str').val(str);
    window.getResult();
};
function showResult(json){
    var str = $('#str').val();
    $('.result').html(json.content);
    $('.tags').html('');
    for(var vo in json.tags){
        $('.tags').append('<button str="'+str+'.'+vo+'" class="btn btn-sx btn-success vo-tag">'+vo+'</button>');
    };
    $('.vo-tag').click(function(){
            var str = $(this).attr('str');
            window.setStr(str);
            });
};
</script>
</body>
</html>
